<template>
  <video
    ref="myElement"
    class="video-contianer"
    muted
    autoplay
    @click="huazhonghua"
  ></video>
</template>
<script setup>
import flvjs from "flv.js"
import { onMounted, ref, onUnmounted, watch } from "vue"
const myElement = ref(null)
const props = defineProps({
  Videourl: String
})
const flvPlayer = ref("")

onMounted(() => {
  initFlv()
})
const initFlv = () => {
  const ele = myElement.value
  flvPlayer.value = flvjs.createPlayer({
    type: "flv", // 指定视频类型
    isLive: true, // 开启直播
    hasAudio: false, // 关闭声音
    cors: true, // 开启跨域访问
    url: props.Videourl // 指定流链接
  }) // 将flvjs对象和DOM对象绑定
  flvPlayer.value.attachMediaElement(ele)
  play()
  flvEvent()
}
const play = () => {
  flvPlayer.value.load()
  flvPlayer.value.play()
}

// flvjs播放器事件侦听
const flvEvent = () => {
  // 视频错误信息回调
  flvPlayer.value.on(
    flvjs.Events.ERROR,
    (errorType, errorDetail, errorInfo) => {
      console.log(
        "类型:" + JSON.stringify(errorType),
        "报错内容" + errorDetail,
        "报错信息" + errorInfo
      )
    }
  )
}
const huazhonghua = () => {
  console.log(myElement.value)
  myElement.value.requestPictureInPicture()
}
const destory = () => {
  flvPlayer.value.pause()
  flvPlayer.value.unload()
  flvPlayer.value.detachMediaElement()
  flvPlayer.value.destroy()
  flvPlayer.value = null
}
onUnmounted(() => {
  destory()
})
watch(
  () => props.Videourl,
  (item) => {
    console.log(item, "侦听器")
    initFlv()
  },
  {
    deep: true, //深度监听
    immediate: false //立即执行
  }
)
</script>
<style lang="less" scoped>
.video-contianer {
  border-radius: 6px;
  // background-color: red;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
/* //音量的控制条 */
video::-webkit-media-controls-volume-slider {
  display: none !important;
}
/* // 进度条 */
video::-webkit-media-controls-timeline {
  display: none;
}
/* // 观看的当前时间 */
video::-webkit-media-controls-current-time-display {
  display: none;
}
/* //剩余时间 */
video::-webkit-media-controls-time-remaining-display {
  display: none;
}
/* //音量按钮 */
video::-webkit-media-controls-mute-button {
  display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}
/* // 播放 */
video::-webkit-media-controls-play-button {
  display: none;
}
/* // 进度条 */
video::-webkit-media-controls-timeline {
  display: none;
}
/* //全屏按钮 */
video::-webkit-media-controls-fullscreen-button {
  display: none;
}
</style>
